<script setup>
import { userLoginService } from "@/api/user.js";
import { User, Lock } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router"; // 引入 useRouter
import { useUserStore } from "@/stores/user";
import Cookies from "js-cookie";
// import { GDOUBg } from '../assets/GDOU-long.png'

// 登录功能

const form = ref();

// formModel 表单数据
const formModel = ref({
  username: "",
  password: "",
});
// form 校验规则
const rules = {
  username: [{ required: true, message: "请输入账号/用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};

const login = async () => {
  try {
    await form.value.validate();
    const res = await userLoginService(formModel.value);
    console.log(res);
    const setCookie = res.headers["set-cookie"];
    //   console.log(setCookie);
    // 检查响应状态
    if (res.status === 200) {
      // 检查服务器返回的数据中是否有错误信息
      if (res.data && res.data.code !== 200) {
        ElMessage.error(res.data.message || "登录失败，服务器返回错误");
        return;
      }

      //   console.log(res);
      //   console.log(Cookies.get("JSESSIONID"));

      ElMessage.success("登录成功");

      const userStore = useUserStore(); // 创建 store 实例
      // console.log(formModel.value);

      userStore.setUsername(formModel.value.username); // 使用 store 方法存储用户名
      //   console.log(userStore.username);
      router.push("/home"); // 登录成功后自动跳转
    } else {
      ElMessage.error("登录失败，服务器响应异常");
    }
  } catch (error) {
    console.error("登录错误:", error);
    // 添加错误处理
    if (error.response) {
      const status = error.response.status;
      ElMessage.error(
        status === 401
          ? "用户名或密码错误"
          : status === 500
          ? "服务器内部错误"
          : "登录失败"
      );
    } else {
      ElMessage.error("网络连接异常");
    }
  }
};

const router = useRouter(); // 创建路由实例

const goToHome = () => {
  router.push("/home"); // 跳转到 home 页
};
</script>

<template>
  <div class="login-warp">
    <div class="ms-login">
      <div class="ms-logo"><img src="../assets/GDOU-long.png" alt="" /></div>

      <div class="ms-title">水生生物学图谱数据库</div>

      <!-- 登录表单 -->
      <el-form class="el-form" :model="formModel" :rules="rules" ref="form">
        <el-form-item class="el-form-username" prop="username">
          <el-input
            v-model="formModel.username"
            :prefix-icon="User"
            placeholder="请输入账号/用户名"
          ></el-input>
        </el-form-item>
        <el-form-item class="el-form-passWord" prop="password">
          <el-input
            v-model="formModel.password"
            name="password"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="gotoHome" style="justify-content: center">
          没有账号?<a href="#" @click.prevent="goToHome">取消登录</a>
        </el-form-item>
        <el-form-item class="el-form-button">
          <el-button
            @click="login"
            class="button"
            type="primary"
            auto-insert-space
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>

<style scoped>
/*  去除内外边界 */

/* 设置背景 */

/* body {
    background: url(../assets/login-bg.webp) no-repeat;
    background-size: cover;
    min-height: 100vh;
} */

/* login-warp */

.login-warp {
  position: relative;
  height: 100vh;
  background: url(../assets/login-bg.webp) no-repeat;
  background-size: cover;
}

/* 登录框 */

.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  /* 记得删高度 */
  height: 400px;
  transform: translate(-50%, -50%);
  background-color: #000;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.7);
}

/* 登录框loge */

.ms-logo {
  padding: 20px 0 0 0;
  text-align: center;
}

.ms-logo img {
  width: 300px;
}

/* 登录框title */

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
  color: #fff;
  letter-spacing: 1px;
  border-bottom: 1px solid #ddd;
}

/* 登录框userName and passWord */

.el-form {
  padding: 30px;
}

/* 取消登录 */

.gotoHome {
  padding: 0px 105px;
  text-align: center;
  color: #fff;
}

.gotoHome a {
  color: #0077ff;
  margin: 0 5px;
}

.el-form-button .button {
  width: 100%;
}
</style>
